<template>
  <div class="app-container">

    <div style="display: flex; justify-content: flex-end;" v-if="!isAgent && formData.status<=20">
        <el-button type="primary" size="small" @click="handlePacking" style="margin:0 20px;">开提箱单</el-button>
      </div>
    <el-tabs v-model="tabsValue" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane v-for="item in tabsList" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
      </el-tabs>
      <div v-if="tabsValue==1">
        <tixiangList></tixiangList>
      </div>
       <div v-if="tabsValue==2">
        <tixiangInfo></tixiangInfo>
      </div>
           <!-- 开提箱单 -->
        <el-dialog v-model="dackingDialog"  v-if="dackingDialog" :show-close="false" size="40%" :with-header="false"> 
            <el-row>
                <el-col :span="6">
                <span class="_before">开提箱单</span>
                </el-col>
            </el-row>
            <el-row align="middle">
                <el-col :span="4"><redStar />提箱单类型</el-col>
                <el-col :span="8" >
                    <el-radio-group v-model="packingType">
                        <el-radio value = "5" size="large">自有箱</el-radio>
                        <el-radio value = "15" size="large">外调箱</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <OwnBox v-if="packingType == '5' " :packingInfo="param.packingInfo"  :orderType="10" @closeDialog="closeDialog"></OwnBox> 
            <!--自有箱-->
            <ExternalBox v-if="packingType == '15'" :packingInfo="param.packingInfo" :orderType="10" @closeDialog="closeDialog"></ExternalBox>
        </el-dialog>
  </div>
</template>

<script setup lang="ts">
import OwnBox from '@/views/orderManage/huiDiaoOrder/component/ownBox';
import ExternalBox from '@/views/orderManage/huiDiaoOrder/component/externalBox';
import { computed, onActivated, onMounted, reactive, ref, watch,provide ,nextTick,inject} from 'vue';
import { ElMessage, ElLoading,ElMessageBox } from 'element-plus'
import tixiangList from '@/views/orderManage/huiDiaoOrder/component/tixiangList.vue'
import tixiangInfo from '@/views/orderManage/huiDiaoOrder/component/tixiangInfo.vue' 
const isAgent=inject('isAgent') //当前等角色  true 货代角色  false 集装箱公司角色
const formData = inject('formData')
const tabsValue=inject('tabsValue') || 1
const tabsList=ref([
{ label: '提箱单', value: 1 },
{ label: '提箱记录', value: 2},
])
const dackingDialog=ref(false)
const packingType = ref('5') // 5:自由箱 15：外调箱
const param = reactive({
  drawerPacking:false,
   packingInfo:[{
        id:'',
        orderNo:'',
        planPickupDate:'',
        createTime:'',
        packingAllocationQuantity:'',
        boxQuantity:'',
        needPackingNum:''
    }]

})
onMounted(() => {
  nextTick(() => {
    let data=formData.value
    param.packingInfo=[]
    let packingItem = {
        id: data.id,
        orderNo: data.orderNo,
        planPickupDate:data.planPickupDate,
        createTime:data.createTime,
        packingAllocationQuantity: data.packingAllocationQuantity,
        boxQuantity: data.boxQuantity,
        needPackingNum: data.boxQuantity - data.packingAllocationQuantity,
        boxType:data.boxType,
        boxCondition:data.boxCondition,
        carryCityId:data.carryCityId,
        returnCityId:data.returnCityId

    }
    param.packingInfo.push(packingItem)
    })
})
const handleClick=(val)=>{
  tabsValue.value=val
}
const handlePacking = () => { // 开提箱单
        dackingDialog.value = true

    if(param.packingInfo[0].needPackingNum){
        dackingDialog.value = true
    }else{
        ElMessage.warning("所有集装箱都已开完提箱单，请勿重复操作！")
    }
   
}

const closeDialog = () => {  // 关闭提箱单弹窗
    dackingDialog.value = false
}

</script>

<style scoped>
.el-form-diy {
  padding: 10px;

  div {
    width: 100%;
  }
}
</style>
